import * as echarts from 'echarts';

// 通用图表初始化函数
function initChart(dom, chartConfig) {
    const myChart = echarts.init(dom);
    myChart.setOption(chartConfig);
    return myChart;
}

// 图表 1 的配置
export function initChart1(dom) {
    const json = {
        chart0: {
            xcategory: ['一', '二', '三', '四', '五', '六', '天'],
            low: [3, 10, 5, 20, 8, 35, 5],
            lowLine: [],
        }
    };

    const zrUtil = echarts.util;

    zrUtil.each(json.chart0.xcategory, function(item, index) {
        json.chart0.lowLine.push([{
            coord: [index, json.chart0.low[index]]
        }, {
            coord: [index + 1, json.chart0.low[index + 1]]
        }]);
    });
    // const chart1Config

    const chart1Config = {
        backgroundColor: "#fff",
        grid: {
            left: '2%', // 左边距
            right: '2%', // 右边距
            top: '10%', // 上边距
            bottom: '5%', // 下边距
            containLabel: true
        },
        tooltip: { // 配置提示框
            trigger: 'axis', // 触发类型，'axis' 表示以坐标轴触发
            axisPointer: { // 坐标轴指示器
                type: 'line', // 指示器类型，'line' 表示直线
                lineStyle: { // 直线样式
                    color: '#7c1fa2', // 直线颜色
                    width: 1, // 直线宽度
                    type: 'solid' // 直线类型，实线
                }
            },
            formatter: function (params) { // 自定义提示框内容
                let result = `<div style="color:#7c1fa2; font-size:14px; font-weight:bold;">${params[0].name}</div>`;
                params.forEach(function (item) {
                    result += `<div style="color:#7c1fa2; font-size:12px;">数据：${item.value}</div>`;
                });
                return result;
            }
        },
        xAxis: {
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            },
            axisLabel: {
                interval: 0,
                show: true
            },
            data: ['一', '二', '三', '四', '五', '六', '天']
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
        },
        series: [{
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
                normal: {
                    width: 4,
                    shadowColor: 'rgba(155, 18, 184, .3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20,
                    shadowOffsetX: 20,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                            offset: 0,
                            color: 'rgba(255, 255, 255,1)'
                        }, {
                            offset: 0.1,
                            color: 'rgba(255, 75, 172,1)'
                        }, {
                            offset: 0.9,
                            color: 'rgba(155, 18, 184,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(255, 255, 255,1)'
                        }, ]
                    )
                }
            },
            itemStyle: {
                color: '#fff',
                borderColor: "#7c1fa2",
                borderWidth: 4,
            },

            data: [3, 10, 5, 20, 8, 35, 5, 25, 20, 37, 30, 39]
        },
            {
                name: '',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                zlevel: 1,
                smooth: true,
                symbol: 'circle',
                symbolSize: 25,
                effect: {
                    show: true,
                    smooth: false,
                    period: 2,
                    symbolSize: 8
                },
                lineStyle: {
                    normal: {
                        color: '#f00',
                        width: 0,
                        opacity: 0,
                        curveness: 0,
                    }
                },
                data: json.chart0.lowLine
            },

        ]
    };
    return initChart(dom, chart1Config);
}

// 图表 2 的配置
export function initChart2(dom) {
    const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
    };

// 数据整理
    let xData = ['北京', '杭州', '上海', '厦门', '成都'];
    let yData = [470, 460, 440, 421, 405];
    let max = Math.max(...yData);
    let labelColor = ['#FD5360', '#FF962B', '#FFAA00']
    let emptyData = yData.map((v, i) => {
        let color = i > 2 ? '#1890FF' : labelColor[i];
        let item = {
            value: max,
            label: {
                formatter: '{a|' + v + '}',
                position: 'right',
                distance: 20,
                rich: {
                    a: {
                        color: color,
                        borderColor: color,
                        borderWidth: 1,
                        borderType: 'dashed',
                        padding: [0, 0, 2, 0],
                        width: 60,
                        height: 18,
                        align: 'center',
                        verticalAlign: 'middle',
                        backgroundColor: hexToRgba(color, 0.05)
                    }
                }

            }
        }
        return item
    })
    let xDataFormat = xData.map((v, i) => {
        let color = i > 2 ? '#333333' : labelColor[i];
        let item = {
            value: v,
            textStyle: {
                rich: {
                    a: {
                        color: color,
                        width: 20,
                        height: 20,
                        align: 'center',
                        verticalAlign: 'middle',
                        backgroundColor: '#fff',
                        borderRadius: 10,
                        borderColor: hexToRgba(color, 0.2),
                        borderWidth: 1,
                        shadowColor: hexToRgba(color, 0.1),
                        shadowBlur: 5
                    },
                    b: {
                        padding: [0, 5]
                    },
                    value: {
                        color: '#666666'
                    }
                }
            }
        }
        return item
    })
    xData.reverse();
    xDataFormat.reverse();
    yData.reverse();
    emptyData.reverse();


    const chart2Config = {
        backgroundColor: '#fff',
        grid: {
            top: "5%",
            left: "-15%",
            right: "25%",
            bottom: "5%",
            containLabel: true
        },
        xAxis: [{
            type: "value",
            splitLine: {
                show: false
            },
            max: function(value) {
                return value.max
            },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisLabel: {
                color: '#666'
            }
        }],
        yAxis: [{
            type: "category",
            name: "",
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#D9D9D9'
                }
            },
            axisLabel: {
                formatter: function(value) {
                    return '{a|' + value.substr(value.length - 1) + '}{b|}{value|' + value + '}'
                }
            },
            data: xDataFormat
        }, {
            type: "category",
            name: "",
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: xData
        }],
        series: [{
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 6, 6, 0],
                    color: 'rgba(225,225,225,0.4)'
                },
                emphasis: {
                    barBorderRadius: [0, 6, 6, 0],
                    color: 'rgba(225,225,225,0.4)'
                }
            },
            label: {
                show: true,
                position: 'right',
                formatter: function(a) {
                    console.log(a)
                }
            },
            data: emptyData
        },
            {
                type: 'bar',
                barWidth: 10,
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: [0, 6, 6, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                            offset: 0,
                            color: '#3D9FFF'
                        }, {
                            offset: 1,
                            color: '#41D7F3'
                        }], false)
                    }
                },
                data: yData
            }
        ]
    };
    return initChart(dom, chart2Config);
}